
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: DataTable: Basic DataTable</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style type="text/css">
/* custom styles for this example */
.dt-example {margin:1em;}

/* css to counter global site css */
.dt-example th {text-transform:none;}
.dt-example table {width:auto;}
.dt-example caption {display:table-caption;}
</style>
</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: DataTable: Basic DataTable</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>DataTable: Basic DataTable</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>The DataTable widget displays data in a tabular format. Use plugins and extensions to add features and functionality to the <code>Y.DataTable.Base</code> class.</p>	</div>

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="datatable_basic_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

	
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	<div id="simple" class="dt-example"></div>

<div id="labels" class="dt-example"></div>

<script type="text/javascript">
YUI({ filter: 'raw' }).use("datatable-base", function (Y) {
    var simpleCols = ["id","name","price"],
    simpleData = [
        {id:"ga_3475", name:"gadget", price:"$6.99"},
        {id:"sp_9980", name:"sprocket", price:"$3.75"},
        {id:"wi_0650", name:"widget", price:"$4.25"}
    ],
    labeledCols = [
        {key:"mfr_parts_database_id", label:"Mfr Part ID", abbr:"ID"},
        {key:"mfr_parts_database_name", label:"Mfr Part Name", abbr:"Name"},
        {key:"mfr_parts_database_price", label:"Wholesale Price", abbr:"Price"}
    ],
    labeledData = [
        {mfr_parts_database_id:"ga_3475", mfr_parts_database_name:"gadget", mfr_parts_database_price:"$6.99"},
        {mfr_parts_database_id:"sp_9980", mfr_parts_database_name:"sprocket", mfr_parts_database_price:"$3.75"},
        {mfr_parts_database_id:"wi_0650", mfr_parts_database_name:"widget", mfr_parts_database_price:"$4.25"}
    ],

    dt1 = new Y.DataTable.Base({columnset:simpleCols, recordset:simpleData, summary:"Price sheet for inventory parts", caption:"Example table with simple columns"}).render("#simple"),
    dt2 = new Y.DataTable.Base({columnset:labeledCols, recordset:labeledData, summary:"Price sheet for inventory parts", caption:"These columns have labels and abbrs"}).render("#labels");
});
</script>

	<!--END SOURCE CODE FOR EXAMPLE =============================== -->

	
		</div>
	</div>
	</div>

	<h2>Simple DataTable Use Cases</h2>

<p>A basic table can be rendered by passing in a simple array of columns and an array of data objects. As long as the columns map directly to the keys of the data objects, the table will be generated automatically from the data provided.</p>

<div id="syntax-15ced48c64eda160b9426cafd5f26df2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;datatable-base&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> cols <span class="sy0">=</span> <span class="br0">&#91;</span><span class="st0">&quot;id&quot;</span><span class="sy0">,</span><span class="st0">&quot;name&quot;</span><span class="sy0">,</span><span class="st0">&quot;price&quot;</span><span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    data <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span>id<span class="sy0">:</span><span class="st0">&quot;ga-3475&quot;</span><span class="sy0">,</span> <span class="kw3">name</span><span class="sy0">:</span><span class="st0">&quot;gadget&quot;</span><span class="sy0">,</span> price<span class="sy0">:</span><span class="st0">&quot;$6.99&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#123;</span>id<span class="sy0">:</span><span class="st0">&quot;sp-9980&quot;</span><span class="sy0">,</span> <span class="kw3">name</span><span class="sy0">:</span><span class="st0">&quot;sprocket&quot;</span><span class="sy0">,</span> price<span class="sy0">:</span><span class="st0">&quot;$3.75&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span>id<span class="sy0">:</span><span class="st0">&quot;wi-0650&quot;</span><span class="sy0">,</span> <span class="kw3">name</span><span class="sy0">:</span><span class="st0">&quot;widget&quot;</span><span class="sy0">,</span> price<span class="sy0">:</span><span class="st0">&quot;$4.25&quot;</span><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    dt <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DataTable</span>.<span class="me1">Base</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        columnset<span class="sy0">:</span> cols<span class="sy0">,</span></div></li><li class="li2"><div class="de2">        recordset<span class="sy0">:</span> data<span class="sy0">,</span></div></li><li class="li1"><div class="de1">        summary<span class="sy0">:</span> <span class="st0">&quot;Price sheet for inventory parts&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        caption<span class="sy0">:</span> <span class="st0">&quot;Example table with simple columns&quot;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">render</span><span class="br0">&#40;</span><span class="st0">&quot;#example&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;datatable-base&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> cols <span class="sy0">=</span> <span class="br0">&#91;</span><span class="st0">&quot;id&quot;</span><span class="sy0">,</span><span class="st0">&quot;name&quot;</span><span class="sy0">,</span><span class="st0">&quot;price&quot;</span><span class="br0">&#93;</span><span class="sy0">,</span>
    data <span class="sy0">=</span> <span class="br0">&#91;</span>
        <span class="br0">&#123;</span>id<span class="sy0">:</span><span class="st0">&quot;ga-3475&quot;</span><span class="sy0">,</span> <span class="kw3">name</span><span class="sy0">:</span><span class="st0">&quot;gadget&quot;</span><span class="sy0">,</span> price<span class="sy0">:</span><span class="st0">&quot;$6.99&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span>id<span class="sy0">:</span><span class="st0">&quot;sp-9980&quot;</span><span class="sy0">,</span> <span class="kw3">name</span><span class="sy0">:</span><span class="st0">&quot;sprocket&quot;</span><span class="sy0">,</span> price<span class="sy0">:</span><span class="st0">&quot;$3.75&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span>id<span class="sy0">:</span><span class="st0">&quot;wi-0650&quot;</span><span class="sy0">,</span> <span class="kw3">name</span><span class="sy0">:</span><span class="st0">&quot;widget&quot;</span><span class="sy0">,</span> price<span class="sy0">:</span><span class="st0">&quot;$4.25&quot;</span><span class="br0">&#125;</span>
    <span class="br0">&#93;</span><span class="sy0">,</span>
    dt <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DataTable</span>.<span class="me1">Base</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
        columnset<span class="sy0">:</span> cols<span class="sy0">,</span>
        recordset<span class="sy0">:</span> data<span class="sy0">,</span>
        summary<span class="sy0">:</span> <span class="st0">&quot;Price sheet for inventory parts&quot;</span><span class="sy0">,</span>
        caption<span class="sy0">:</span> <span class="st0">&quot;Example table with simple columns&quot;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">render</span><span class="br0">&#40;</span><span class="st0">&quot;#example&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-15ced48c64eda160b9426cafd5f26df2-plain">YUI().use("datatable-base", function(Y) {
    var cols = ["id","name","price"],
    data = [
        {id:"ga-3475", name:"gadget", price:"$6.99"},
        {id:"sp-9980", name:"sprocket", price:"$3.75"},
        {id:"wi-0650", name:"widget", price:"$4.25"}
    ],
    dt = new Y.DataTable.Base({
        columnset: cols,
        recordset: data,
        summary: "Price sheet for inventory parts",
        caption: "Example table with simple columns"
    }).render("#example");
});</textarea></div>
<p>Your column definitions may be an array of object literals in order to support any number of configurations that are supported by the <code>Y.Column</code> class. For instance, you may wish to define a <code>label</code> that will be displayed in each column header. Use the <code>key</code> property to define where data for the column will be coming from.</p>

<div id="syntax-9aa9a660d8ddc2bec1fdc8b316914dfa" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;datatable-base&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> cols <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span> key<span class="sy0">:</span> <span class="st0">&quot;mfr_parts_database_id&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span> <span class="st0">&quot;Mfr Part ID&quot;</span><span class="sy0">,</span> abbr<span class="sy0">:</span> <span class="st0">&quot;ID&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span> key<span class="sy0">:</span> <span class="st0">&quot;mfr_parts_database_name&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span> <span class="st0">&quot;Mfr Part Name&quot;</span><span class="sy0">,</span> abbr<span class="sy0">:</span> <span class="st0">&quot;Name&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#123;</span> key<span class="sy0">:</span> <span class="st0">&quot;mfr_parts_database_price&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span> <span class="st0">&quot;Wholesale Price&quot;</span><span class="sy0">,</span> abbr<span class="sy0">:</span> <span class="st0">&quot;Price&quot;</span><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    data <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span> mfr_parts_database_id<span class="sy0">:</span> <span class="st0">&quot;ga_3475&quot;</span><span class="sy0">,</span> mfr_parts_database_name<span class="sy0">:</span> <span class="st0">&quot;gadget&quot;</span><span class="sy0">,</span> mfr_parts_database_price<span class="sy0">:</span> <span class="st0">&quot;$6.99&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span> mfr_parts_database_id<span class="sy0">:</span> <span class="st0">&quot;sp_9980&quot;</span><span class="sy0">,</span> mfr_parts_database_name<span class="sy0">:</span> <span class="st0">&quot;sprocket&quot;</span><span class="sy0">,</span> mfr_parts_database_price<span class="sy0">:</span> <span class="st0">&quot;$3.75&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#123;</span> mfr_parts_database_id<span class="sy0">:</span> <span class="st0">&quot;wi_0650&quot;</span><span class="sy0">,</span> mfr_parts_database_name<span class="sy0">:</span> <span class="st0">&quot;widget&quot;</span><span class="sy0">,</span> mfr_parts_database_price<span class="sy0">:</span> <span class="st0">&quot;$4.25&quot;</span><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    dt <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DataTable</span>.<span class="me1">Base</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        columnset<span class="sy0">:</span> cols<span class="sy0">,</span></div></li><li class="li1"><div class="de1">        recordset<span class="sy0">:</span> data<span class="sy0">,</span></div></li><li class="li2"><div class="de2">        summary<span class="sy0">:</span> <span class="st0">&quot;Price sheet for inventory parts&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        caption<span class="sy0">:</span> <span class="st0">&quot;These columns have labels and abbrs&quot;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">render</span><span class="br0">&#40;</span><span class="st0">&quot;#example&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;datatable-base&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> cols <span class="sy0">=</span> <span class="br0">&#91;</span>
        <span class="br0">&#123;</span> key<span class="sy0">:</span> <span class="st0">&quot;mfr_parts_database_id&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span> <span class="st0">&quot;Mfr Part ID&quot;</span><span class="sy0">,</span> abbr<span class="sy0">:</span> <span class="st0">&quot;ID&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span> key<span class="sy0">:</span> <span class="st0">&quot;mfr_parts_database_name&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span> <span class="st0">&quot;Mfr Part Name&quot;</span><span class="sy0">,</span> abbr<span class="sy0">:</span> <span class="st0">&quot;Name&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span> key<span class="sy0">:</span> <span class="st0">&quot;mfr_parts_database_price&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span> <span class="st0">&quot;Wholesale Price&quot;</span><span class="sy0">,</span> abbr<span class="sy0">:</span> <span class="st0">&quot;Price&quot;</span><span class="br0">&#125;</span>
    <span class="br0">&#93;</span><span class="sy0">,</span>
    data <span class="sy0">=</span> <span class="br0">&#91;</span>
        <span class="br0">&#123;</span> mfr_parts_database_id<span class="sy0">:</span> <span class="st0">&quot;ga_3475&quot;</span><span class="sy0">,</span> mfr_parts_database_name<span class="sy0">:</span> <span class="st0">&quot;gadget&quot;</span><span class="sy0">,</span> mfr_parts_database_price<span class="sy0">:</span> <span class="st0">&quot;$6.99&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span> mfr_parts_database_id<span class="sy0">:</span> <span class="st0">&quot;sp_9980&quot;</span><span class="sy0">,</span> mfr_parts_database_name<span class="sy0">:</span> <span class="st0">&quot;sprocket&quot;</span><span class="sy0">,</span> mfr_parts_database_price<span class="sy0">:</span> <span class="st0">&quot;$3.75&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span> mfr_parts_database_id<span class="sy0">:</span> <span class="st0">&quot;wi_0650&quot;</span><span class="sy0">,</span> mfr_parts_database_name<span class="sy0">:</span> <span class="st0">&quot;widget&quot;</span><span class="sy0">,</span> mfr_parts_database_price<span class="sy0">:</span> <span class="st0">&quot;$4.25&quot;</span><span class="br0">&#125;</span>
    <span class="br0">&#93;</span><span class="sy0">,</span>
    dt <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DataTable</span>.<span class="me1">Base</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
        columnset<span class="sy0">:</span> cols<span class="sy0">,</span>
        recordset<span class="sy0">:</span> data<span class="sy0">,</span>
        summary<span class="sy0">:</span> <span class="st0">&quot;Price sheet for inventory parts&quot;</span><span class="sy0">,</span>
        caption<span class="sy0">:</span> <span class="st0">&quot;These columns have labels and abbrs&quot;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">render</span><span class="br0">&#40;</span><span class="st0">&quot;#example&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-9aa9a660d8ddc2bec1fdc8b316914dfa-plain">YUI().use("datatable-base", function(Y) {
    var cols = [
        { key: "mfr_parts_database_id", label: "Mfr Part ID", abbr: "ID"},
        { key: "mfr_parts_database_name", label: "Mfr Part Name", abbr: "Name"},
        { key: "mfr_parts_database_price", label: "Wholesale Price", abbr: "Price"}
    ],
    data = [
        { mfr_parts_database_id: "ga_3475", mfr_parts_database_name: "gadget", mfr_parts_database_price: "$6.99"},
        { mfr_parts_database_id: "sp_9980", mfr_parts_database_name: "sprocket", mfr_parts_database_price: "$3.75"},
        { mfr_parts_database_id: "wi_0650", mfr_parts_database_name: "widget", mfr_parts_database_price: "$4.25"}
    ],
    dt = new Y.DataTable.Base({
        columnset: cols,
        recordset: data,
        summary: "Price sheet for inventory parts",
        caption: "These columns have labels and abbrs"
    }).render("#example");
});</textarea></div>
				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    DataTable Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li class='selected'><a href='../datatable/datatable_basic.html'>Basic DataTable</a></li><li><a href='../datatable/datatable_dsget.html'>DataTable + DataSource.Get + JSON Data</a></li><li><a href='../datatable/datatable_dsio.html'>DataTable + DataSource.IO + XML Data</a></li><li><a href='../datatable/datatable_formatting.html'>Formatting Row Data for Display</a></li><li><a href='../datatable/datatable_nestedcols.html'>Nested Column Headers</a></li><li><a href='../datatable/datatable_sort.html'>Column Sorting</a></li><li><a href='../datatable/datatable_scroll.html'>Scrolling DataTable</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More DataTable Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/datatable/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_datatable.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
